<template>
    <div style="width: 980px;margin: 0 auto;">
        <i-divider dashed>Icon 图标示例</i-divider>
        <Icon type="ios-checkmark" size="24"/>
        <Icon type="ios-add" size="24"/>
        <Icon type="ios-alarm" size="24"/>
        <Icon type="md-arrow-dropright" size="24"/>

        <i-divider dashed>Button 按钮示例</i-divider>
        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>

        <i-divider dashed>Input 输入框示例</i-divider>
        <Input v-model="inputValue" placeholder="Enter something..." style="width: 300px"/>

        <i-divider dashed>Radio 单选按钮示例</i-divider>
        <Radio v-model="radioSingle">Radio</Radio>

        <i-divider dashed>List 列表示例</i-divider>
        <List header="Header" footer="Footer" border>
            <ListItem>This is a piece of text.</ListItem>
            <ListItem>This is a piece of text.</ListItem>
            <ListItem>This is a piece of text.</ListItem>
        </List>

        <i-divider dashed>Switch 开关示例</i-divider>
        <i-switch size="large"/>
        <i-switch/>
        <i-switch size="small"/>

        <i-divider dashed>Grid 栅格示例</i-divider>
        <p>顶部对齐</p>
        <Row type="flex" justify="center" align="top" class="code-row-bg">
            <Col span="4"><p style="height: 80px">col-4</p></Col>
            <Col span="4"><p style="height: 30px">col-4</p></Col>
            <Col span="4"><p style="height: 100px">col-4</p></Col>
            <Col span="4"><p style="height: 60px">col-4</p></Col>
        </Row>
        <p>底部对齐</p>
        <Row type="flex" justify="center" align="bottom" class="code-row-bg">
            <Col span="4"><p style="height: 80px">col-4</p></Col>
            <Col span="4"><p style="height: 30px">col-4</p></Col>
            <Col span="4"><p style="height: 100px">col-4</p></Col>
            <Col span="4"><p style="height: 60px">col-4</p></Col>
        </Row>
        <p>居中对齐</p>
        <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <Col span="4"><p style="height: 80px">col-4</p></Col>
            <Col span="4"><p style="height: 30px">col-4</p></Col>
            <Col span="4"><p style="height: 100px">col-4</p></Col>
            <Col span="4"><p style="height: 60px">col-4</p></Col>
        </Row>

        <i-divider dashed>Card 卡片示例</i-divider>
        <div style="background:#eee;padding: 20px">
            <Card :bordered="false">
                <p slot="title">No border title</p>
                <p>Content of no border type. Content of no border type. Content of no border type. Content of no border
                    type. </p>
            </Card>
        </div>

        <i-divider dashed>Collapse 折叠面板示例</i-divider>
        <Collapse v-model="collapseValue1">
            <Panel name="1">
                史蒂夫·乔布斯
                <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
            </Panel>
            <Panel name="2">
                斯蒂夫·盖瑞·沃兹尼亚克
                <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                    Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                    Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
            </Panel>
            <Panel name="3">
                乔纳森·伊夫
                <p slot="content">
                    乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
            </Panel>
        </Collapse>

        <i-divider dashed>Split 面板分割示例</i-divider>
        <div class="demo-split">
            <Split v-model="split1">
                <div slot="left" class="demo-split-pane">
                    Left Pane
                </div>
                <div slot="right" class="demo-split-pane">
                    Right Pane
                </div>
            </Split>
        </div>

        <i-divider dashed>Checkbox 多选框示例</i-divider>
        <CheckboxGroup v-model="checkboxBorder">
            <Checkbox label="香蕉" border></Checkbox>
            <Checkbox label="苹果" border></Checkbox>
            <Checkbox label="西瓜" border></Checkbox>
        </CheckboxGroup>

        <i-divider dashed>Tabs 标签页示例</i-divider>
        <Tabs>
            <TabPane label="macOS" icon="logo-apple">标签一的内容</TabPane>
            <TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
            <TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
        </Tabs>

        <i-divider dashed>Dropdown 下拉菜单示例</i-divider>
        <Dropdown style="margin-left: 20px">
            <Button type="primary">
                下拉菜单
                <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem>冰糖葫芦</DropdownItem>
                <DropdownItem divided>北京烤鸭</DropdownItem>
            </DropdownMenu>
        </Dropdown>

        <i-divider dashed>Menu 导航菜单示例</i-divider>
        <Menu theme="dark" active-name="1-2" :open-names="['1']">
            <Submenu name="1">
                <template slot="title">
                    <Icon type="ios-paper"/>
                    内容管理
                </template>
                <MenuItem name="1-1">文章管理</MenuItem>
                <MenuItem name="1-2">评论管理</MenuItem>
                <MenuItem name="1-3">举报管理</MenuItem>
            </Submenu>
            <Submenu name="2">
                <template slot="title">
                    <Icon type="ios-people"/>
                    用户管理
                </template>
                <MenuItem name="2-1">新增用户</MenuItem>
                <MenuItem name="2-2">活跃用户</MenuItem>
            </Submenu>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="ios-stats"/>
                    统计分析
                </template>
                <MenuGroup title="使用">
                    <MenuItem name="3-1">新增和启动</MenuItem>
                    <MenuItem name="3-2">活跃分析</MenuItem>
                    <MenuItem name="3-3">时段分析</MenuItem>
                </MenuGroup>
                <MenuGroup title="留存">
                    <MenuItem name="3-4">用户留存</MenuItem>
                    <MenuItem name="3-5">流失用户</MenuItem>
                </MenuGroup>
            </Submenu>
        </Menu>

        <i-divider dashed>Cell 单元格示例</i-divider>
        <Card title="Options" icon="ios-options" :padding="0" shadow style="width: 300px;">
            <CellGroup>
                <Cell title="Only show titles"/>
                <Cell title="Display label content" label="label content"/>
                <Cell title="Display right content" extra="details"/>
                <Cell title="Link" extra="details" to="/components/button"/>
                <Cell title="Open link in new window" to="/components/button" target="_blank"/>
                <Cell title="Disabled" disabled/>
                <Cell title="Selected" selected/>
                <Cell title="With Badge" to="/components/badge">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra"/>
                </Cell>
            </CellGroup>
        </Card>

        <i-divider dashed>Page 分页示例</i-divider>
        <Page :total="100" show-elevator show-sizer show-totle/>

        <i-divider dashed>Breadcrumb 面包屑示例</i-divider>
        <Breadcrumb>
            <BreadcrumbItem to="/">
                <Icon type="ios-home-outline"></Icon>
                Home
            </BreadcrumbItem>
            <BreadcrumbItem to="/components/breadcrumb">
                <Icon type="logo-buffer"></Icon>
                Components
            </BreadcrumbItem>
            <BreadcrumbItem>
                <Icon type="ios-cafe"></Icon>
                Breadcrumb
            </BreadcrumbItem>
        </Breadcrumb>

        <i-divider dashed>Badge 徽标数示例</i-divider>
        <Badge :count="5" type="primary">
            <a href="#" class="demo-badge"></a>
        </Badge>
        <Badge :count="5" type="success">
            <a href="#" class="demo-badge"></a>
        </Badge>
        <Badge :count="5" type="normal">
            <a href="#" class="demo-badge"></a>
        </Badge>
        <Badge :count="5" type="info">
            <a href="#" class="demo-badge"></a>
        </Badge>
        <Badge :count="5" type="error">
            <a href="#" class="demo-badge"></a>
        </Badge>
        <Badge :count="5" type="warning">
            <a href="#" class="demo-badge"></a>
        </Badge>

        <i-divider dashed>Steps 步骤条示例</i-divider>
        <Steps :current="1" status="error">
            <Step title="已完成" content="这里是该步骤的描述信息"></Step>
            <Step title="进行中" content="这里是该步骤的描述信息"></Step>
            <Step title="待进行" content="这里是该步骤的描述信息"></Step>
            <Step title="待进行" content="这里是该步骤的描述信息"></Step>
        </Steps>

        <i-divider dashed>LoadingBar 加载进度条示例</i-divider>
        <Button @click="start">Start</Button>
        <Button @click="finish">Finish</Button>
        <Button @click="error">Error</Button>

        <i-divider dashed>Table 表格示例</i-divider>
        <Table :columns="columns13" :data="data5" border></Table>

        <i-divider dashed>Select 选择器示例</i-divider>
        <Row>
            <Col span="12" style="padding-right:10px">
                <Select v-model="model11" filterable>
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col span="12">
                <Select v-model="model12" filterable multiple>
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
        </Row>

        <i-divider dashed>AutoComplete 自动完成示例</i-divider>
        <AutoComplete
                v-model="value2"
                @on-search="handleSearch2"
                placeholder="input here"
                style="width:200px">
            <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
        </AutoComplete>

        <i-divider dashed>Slider 滑块示例</i-divider>
        <Slider v-model="value8" show-input></Slider>

        <i-divider dashed>DatePicker 日期选择器示例</i-divider>
        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)"
                    style="width: 300px"></DatePicker>

        <i-divider dashedTimePicker 时间选择器>示例</i-divider>
        <Row>
            <Col span="12">
                <TimePicker confirm placeholder="Select time" style="width: 168px"></TimePicker>
            </Col>
            <Col span="12">
                <TimePicker confirm type="timerange" placement="bottom-end" placeholder="Select time"
                            style="width: 168px"></TimePicker>
            </Col>
        </Row>

        <i-divider dashed>Cascader 级联选择示例</i-divider>
        <Cascader :data="cascaderData" trigger="hover"></Cascader>

        <i-divider dashed>Transfer 穿梭框示例</i-divider>
        <Transfer
                :data="transferData1"
                :target-keys="targetKeys1"
                :render-format="render1"
                @on-change="handleChange1"></Transfer>

        <i-divider dashed>InputNumber 数字输入框示例</i-divider>
        <InputNumber :max="10" :min="1" :step="1.2" v-model="inputNumber2"></InputNumber>

        <i-divider dashed>Rate 评分示例</i-divider>
        <Row>
            <Col span="12">
                <Rate show-text v-model="valueText"/>
            </Col>
            <Col span="12">
                <Rate show-text allow-half v-model="valueCustomText">
                    <span style="color: #f5a623">{{ valueCustomText }}</span>
                </Rate>
            </Col>
        </Row>

        <i-divider dashed>ColorPicker 颜色选择器示例</i-divider>
        <ColorPicker v-model="color3" alpha/>

        <i-divider dashed>Form 表单示例</i-divider>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
            </FormItem>
            <FormItem label="E-mail" prop="mail">
                <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
            </FormItem>
            <FormItem label="City" prop="city">
                <Select v-model="formValidate.city" placeholder="Select your city">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                </Select>
            </FormItem>
            <FormItem label="Date">
                <Row>
                    <Col span="11">
                        <FormItem prop="date">
                            <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="11">
                        <FormItem prop="time">
                            <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                        </FormItem>
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="Gender" prop="gender">
                <RadioGroup v-model="formValidate.gender">
                    <Radio label="male">Male</Radio>
                    <Radio label="female">Female</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="Hobby" prop="interest">
                <CheckboxGroup v-model="formValidate.interest">
                    <Checkbox label="Eat"></Checkbox>
                    <Checkbox label="Sleep"></Checkbox>
                    <Checkbox label="Run"></Checkbox>
                    <Checkbox label="Movie"></Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem label="Desc" prop="desc">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                       placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
            </FormItem>
        </Form>

        <i-divider dashed>Alert 警告提示示例</i-divider>
        <Alert show-icon>An info prompt</Alert>
        <Alert type="success" show-icon>A success prompt</Alert>
        <Alert type="warning" show-icon>A warning prompt</Alert>
        <Alert type="error" show-icon>An error prompt</Alert>

        <i-divider dashed>Message 全局提示示例</i-divider>
        <Button @click="background('info')">显示普通提示</Button>
        <Button @click="background('success')">显示成功提示</Button>
        <Button @click="background('warning')">显示警告提示</Button>
        <Button @click="background('error')">显示错误提示</Button>

        <i-divider dashed>Notice 通知提醒示例</i-divider>
        <p>With desc</p>
        <Button @click="info(false)">Info</Button>
        <Button @click="success(false)">Success</Button>
        <Button @click="warning(false)">Warning</Button>
        <Button @click="error(false)">Error</Button>
        <p>Only title</p>
        <Button @click="info(true)">Info</Button>
        <Button @click="success(true)">Success</Button>
        <Button @click="warning(true)">Warning</Button>
        <Button @click="error(true)">Error</Button>

        <i-divider dashed>Modal 对话框示例</i-divider>
        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
        <Modal
                v-model="modal1"
                title="Common Modal dialog box title"
                @on-ok="ok"
                @on-cancel="cancel">
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>

        <i-divider dashed>Drawer 抽屉示例</i-divider>
        <Button @click="drawerValue1 = true" type="primary">Open</Button>
        <Drawer title="Basic Drawer" :closable="false" v-model="drawerValue1">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </Drawer>

        <i-divider dashed>Tree 树形控件示例</i-divider>
        <Tree :data="data4" show-checkbox multiple></Tree>

        <i-divider dashed>Tooltip 文字提示示例</i-divider>
        <Tooltip content="Top Left text" placement="top-start">
            <Button>Top Left</Button>
        </Tooltip>
        <Tooltip content="Top Center text" placement="top">
            <Button>Top Center</Button>
        </Tooltip>
        <Tooltip content="Top Right text" placement="top-end">
            <Button>Top Right</Button>
        </Tooltip>
        <Tooltip content="Left Top text" placement="left-start">
            <Button>Left Top</Button>
        </Tooltip>
        <br><br>
        <Tooltip content="Left Center text" placement="left">
            <Button>Left Center</Button>
        </Tooltip>
        <br><br>
        <Tooltip content="Left Bottom text" placement="left-end">
            <Button>Left Bottom</Button>
        </Tooltip>
        <Tooltip content="Right Top text" placement="right-start">
            <Button>Right Top</Button>
        </Tooltip>
        <br><br>
        <Tooltip content="Right Center text" placement="right">
            <Button>Right Center</Button>
        </Tooltip>
        <br><br>
        <Tooltip content="Right Bottom text" placement="right-end">
            <Button>Right Bottom</Button>
        </Tooltip>

        <i-divider dashed>Poptip 气泡提示示例</i-divider>
        <Poptip trigger="hover" title="Title" content="content">
            <Button>Hover</Button>
        </Poptip>
        <Poptip title="Title" content="content">
            <Button>Click</Button>
        </Poptip>
        <Poptip trigger="focus" title="Title" content="content">
            <Button>Focus</Button>
        </Poptip>
        <Poptip trigger="focus" title="Title" content="content">
            <Input placeholder="Input focus"/>
        </Poptip>

        <i-divider dashed>Affix 图钉示例</i-divider>
        <Affix>
            <span class="demo-affix">Fixed at the top</span>
        </Affix>

        <i-divider dashed>Progress 进度条示例</i-divider>
        <Progress :percent="25"/>
        <Progress :percent="45" status="active"/>
        <Progress :percent="65" status="wrong"/>
        <Progress :percent="100"/>
        <Progress :percent="25" hide-info/>

        <i-divider dashed>Avatar 头像示例</i-divider>
        <Badge :count="1">
            <Avatar shape="square" icon="ios-person"/>
        </Badge>
        <Badge dot>
            <Avatar shape="square" icon="ios-person"/>
        </Badge>

        <i-divider dashed>Tag 标签示例</i-divider>
        <Tag color="default">default</Tag>
        <Tag color="primary">primary</Tag>
        <Tag color="success">success</Tag>
        <Tag color="error">error</Tag>
        <Tag color="warning">warning</Tag>
        <Tag color="magenta">magenta</Tag>
        <Tag color="red">red</Tag>
        <Tag color="volcano">volcano</Tag>
        <Tag color="orange">orange</Tag>
        <Tag color="gold">gold</Tag>
        <Tag color="yellow">yellow</Tag>
        <Tag color="lime">lime</Tag>
        <Tag color="green">green</Tag>
        <Tag color="cyan">cyan</Tag>
        <Tag color="blue">blue</Tag>
        <Tag color="geekblue">geekblue</Tag>
        <Tag color="purple">purple</Tag>
        <Tag color="#FFA2D3">Custom Color</Tag>
        <br><br>
        <Tag type="border" closable color="primary">标签一</Tag>
        <Tag type="border" closable color="success">标签二</Tag>
        <Tag type="border" closable color="error">标签三</Tag>
        <Tag type="border" closable color="warning">标签四</Tag>
        <br><br>
        <Tag type="dot" closable color="primary">标签一</Tag>
        <Tag type="dot" closable color="success">标签二</Tag>
        <Tag type="dot" closable color="error">标签三</Tag>
        <Tag type="dot" closable color="warning">标签四</Tag>

        <i-divider dashed>Carousel 走马灯示例</i-divider>
        <Carousel v-model="carouselValue1" loop>
            <CarouselItem>
                <div class="demo-carousel">1</div>
            </CarouselItem>
            <CarouselItem>
                <div class="demo-carousel">2</div>
            </CarouselItem>
            <CarouselItem>
                <div class="demo-carousel">3</div>
            </CarouselItem>
            <CarouselItem>
                <div class="demo-carousel">4</div>
            </CarouselItem>
        </Carousel>

        <i-divider dashed>Timeline 时间轴示例</i-divider>
        <Timeline>
            <TimelineItem color="green">发布1.0版本</TimelineItem>
            <TimelineItem color="green">发布2.0版本</TimelineItem>
            <TimelineItem color="red">严重故障</TimelineItem>
            <TimelineItem color="blue">发布3.0版本</TimelineItem>
        </Timeline>

        <i-divider dashed>Time 相对时间示例</i-divider>
        <i-time :time="time2"/>
        <br>
        <i-time :time="time2" type="date"/>
        <br>
        <i-time :time="time2" type="datetime"/>

        <i-divider dashed>Circle 进度环示例</i-divider>
        <i-circle
                :size="250"
                :trail-width="4"
                :stroke-width="5"
                :percent="75"
                stroke-linecap="square"
                stroke-color="#43a3fb">
            <div class="demo-circle-custom">
                <h1>42,001,776</h1>
                <p>消费人群规模</p>
                <span>
                总占人数
                <i>75%</i>
            </span>
            </div>
        </i-circle>

        <i-divider dashed>Spin 加载中示例</i-divider>
        <Row>
            <Col class="demo-spin-col" span="8">
                <Spin fix>加载中...</Spin>
            </Col>
            <Col class="demo-spin-col" span="8">
                <Spin fix>
                    <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                    <div>Loading</div>
                </Spin>
            </Col>
            <Col class="demo-spin-col" span="8">
                <Spin fix>
                    <div class="loader">
                        <svg class="circular" viewBox="25 25 50 50">
                            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5"
                                    stroke-miterlimit="10"></circle>
                        </svg>
                    </div>
                </Spin>
            </Col>
        </Row>

        <i-divider dashed>BackTop 返回顶部示例</i-divider>
        <BackTop></BackTop>
        <BackTop :height="100" :bottom="200">
            <div class="back-top">返回顶端</div>
        </BackTop>

        <i-divider dashed>Scroll 无限滚动示例</i-divider>
        <Scroll :on-reach-edge="handleReachEdge">
            <Card dis-hover v-for="(item, index) in list3" :key="index" style="margin: 32px 0">
                Content {{ item }}
            </Card>
        </Scroll>

    </div>
</template>

<script>
    import {
        // Scroll组件有个bug，就是在scroll.vue源码中引入了loading-component.vue，loading-component.vue的template有个属性lang="html"，只要把它去掉才能打包通过，否则会报错：
        // Errors compiling template:
        // text "module.exports = "\n" outside root ant design2 will be ignored.
        Scroll,
        BackTop,
        Spin,
        Affix,
        Circle,
        Time,
        TimelineItem,
        Timeline,
        CarouselItem,
        Carousel,
        Tag,
        Avatar,
        Progress,
        Poptip,
        Tooltip,
        Tree,
        Drawer,
        Modal,
        Notice,
        Alert,
        RadioGroup,
        Checkbox,
        CheckboxGroup,
        FormItem,
        Form,
        ColorPicker,
        Rate,
        InputNumber,
        Transfer,
        Cascader,
        TimePicker,
        DatePicker,
        Slider,
        Option,
        Select,
        AutoComplete,
        Table,
        Steps,
        BreadcrumbItem,
        Breadcrumb,
        Page,
        Badge,
        Cell,
        CellGroup,
        Dropdown,
        Menu,
        TabPane,
        Tabs,
        Icon,
        Button,
        Input,
        Radio,
        Collapse,
        Switch,
        Divider,
        Row,
        Col,
        Split,
        List,
        Card,
        Message,
    }
        from 'view-design';
    import Loading from "view-design/src/components/loading-bar" // 单例模式，直接调用start、finish、error方法，不需要 Vue.component()

    Vue.component('Scroll', Scroll);
    Vue.component('BackTop', BackTop);
    Vue.component('Spin', Spin);
    Vue.component('Affix', Affix);
    Vue.component('i-circle', Circle);
    Vue.component('i-time', Time);
    Vue.component('Timeline', Timeline);
    Vue.component('TimelineItem', TimelineItem);
    Vue.component('CarouselItem', CarouselItem);
    Vue.component('Carousel', Carousel);
    Vue.component('Tag', Tag);
    Vue.component('Avatar', Avatar);
    Vue.component('Progress', Progress);
    Vue.component('Poptip', Poptip);
    Vue.component('Tooltip', Tooltip);
    Vue.component('Tree', Tree);
    Vue.component('Drawer', Drawer);
    Vue.component('Modal', Modal);
    Vue.component('Alert', Alert);
    Vue.component('RadioGroup', RadioGroup);
    Vue.component('Checkbox', Checkbox);
    Vue.component('CheckboxGroup', CheckboxGroup);
    Vue.component('FormItem', FormItem);
    Vue.component('Form', Form);
    Vue.component('ColorPicker', ColorPicker);
    Vue.component('Rate', Rate);
    Vue.component('InputNumber', InputNumber);
    Vue.component('Transfer', Transfer);
    Vue.component('Cascader', Cascader);
    Vue.component('TimePicker', TimePicker);
    Vue.component('DatePicker', DatePicker);
    Vue.component('Slider', Slider);
    Vue.component('AutoComplete', AutoComplete);
    Vue.component('Option', Option);
    Vue.component('Select', Select);
    Vue.component('Table', Table);
    Vue.component('Step', Steps.Step);
    Vue.component('Steps', Steps);
    Vue.component('BreadcrumbItem', BreadcrumbItem);
    Vue.component('Breadcrumb', Breadcrumb);
    Vue.component('Page', Page);
    Vue.component('Badge', Badge);
    Vue.component('CellGroup', CellGroup);
    Vue.component('Cell', Cell);
    Vue.component('Menu', Menu);
    Vue.component('MenuItem', Menu.Item);
    Vue.component('Submenu', Menu.Sub);
    Vue.component('Dropdown', Dropdown);
    Vue.component('DropdownItem', Dropdown.Item);
    Vue.component('DropdownMenu', Dropdown.Menu);
    Vue.component('TabPane', TabPane);
    Vue.component('Tabs', Tabs);
    Vue.component('CheckboxGroup', CheckboxGroup);
    Vue.component('Checkbox', Checkbox);
    Vue.component('Icon', Icon);
    Vue.component('Button', Button);
    Vue.component('Input', Input);
    Vue.component('Radio', Radio);
    Vue.component('List', List);
    Vue.component('ListItem', List.Item); // ListItem无法正常引入，只能通过这种方式引入
    Vue.component('i-switch', Switch); // 定义标签别名
    Vue.component("i-divider", Divider);
    Vue.component("Row", Row);
    Vue.component("Col", Col);
    Vue.component("Card", Card);
    Vue.component("Collapse", Collapse);
    Vue.component("Panel", Collapse.Panel);
    Vue.component("Split", Split);
    export default {
        props: {
            widgetID: String
        },
        data() {
            return {
                list3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                time2: (new Date()).getTime() - 86400 * 3 * 1000,
                carouselValue1: 2,
                data4: [
                    {
                        title: 'parent 1',
                        expand: true,
                        selected: true,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-1-1',
                                        disabled: true
                                    },
                                    {
                                        title: 'leaf 1-1-2'
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-2-1',
                                        checked: true
                                    },
                                    {
                                        title: 'leaf 1-2-1'
                                    }
                                ]
                            }
                        ]
                    }
                ],
                drawerValue1: false,
                modal1: false,
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    mail: [
                        {required: true, message: 'Mailbox cannot be empty', trigger: 'blur'},
                        {type: 'email', message: 'Incorrect email format', trigger: 'blur'}
                    ],
                    city: [
                        {required: true, message: 'Please select the city', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: 'Please select gender', trigger: 'change'}
                    ],
                    interest: [
                        {
                            required: true,
                            type: 'array',
                            min: 1,
                            message: 'Choose at least one hobby',
                            trigger: 'change'
                        },
                        {type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change'}
                    ],
                    date: [
                        {required: true, type: 'date', message: 'Please select the date', trigger: 'change'}
                    ],
                    time: [
                        {required: true, type: 'string', message: 'Please select time', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: 'Please enter a personal introduction', trigger: 'blur'},
                        {type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur'}
                    ]
                },
                color3:
                    'rgba(25, 190,107, .5)',
                valueText:
                    3,
                valueCustomText:
                    3.8,
                inputNumber2:
                    2,
                transferData1:
                    this.getMockData(),
                targetKeys1:
                    this.getTargetKeys(),
                cascaderData:
                    [
                        {
                            value: 'beijing',
                            label: '北京',
                            children: [
                                {
                                    value: 'gugong',
                                    label: '故宫'
                                },
                                {
                                    value: 'tiantan',
                                    label: '天坛'
                                },
                                {
                                    value: 'wangfujing',
                                    label: '王府井'
                                }
                            ]
                        }, {
                        value: 'jiangsu',
                        label: '江苏',
                        children: [
                            {
                                value: 'nanjing',
                                label: '南京',
                                children: [
                                    {
                                        value: 'fuzimiao',
                                        label: '夫子庙',
                                    }
                                ]
                            },
                            {
                                value: 'suzhou',
                                label: '苏州',
                                children: [
                                    {
                                        value: 'zhuozhengyuan',
                                        label: '拙政园',
                                    },
                                    {
                                        value: 'shizilin',
                                        label: '狮子林',
                                    }
                                ]
                            }
                        ],
                    }],
                value8:
                    25,
                value2:
                    '',
                data2:
                    [],
                btnName:
                    "default",
                inputValue:
                    '',
                radioSingle:
                    false,
                collapseValue1:
                    '1',
                split1:
                    0.5,
                checkboxBorder:
                    ['香蕉'],
                switchValue:
                    true,
                columns13:
                    [
                        {
                            title: 'Date',
                            key: 'date',
                            resizable: true,
                            width: 180
                        },
                        {
                            title: 'Name',
                            key: 'name',
                            resizable: true,
                            width: 180
                        },
                        {
                            title: 'Age',
                            key: 'age',
                            resizable: true,
                            width: 180
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        }
                    ],
                data5:
                    [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ],
                cityList:
                    [
                        {
                            value: 'New York',
                            label: 'New York'
                        },
                        {
                            value: 'London',
                            label: 'London'
                        },
                        {
                            value: 'Sydney',
                            label: 'Sydney'
                        },
                        {
                            value: 'Ottawa',
                            label: 'Ottawa'
                        },
                        {
                            value: 'Paris',
                            label: 'Paris'
                        },
                        {
                            value: 'Canberra',
                            label: 'Canberra'
                        }
                    ],
                model11:
                    '',
                model12:
                    [],
            }
        }
        ,
        methods: {
            handleReachEdge(dir) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        if (dir > 0) {
                            const first = this.list3[0];
                            for (let i = 1; i < 11; i++) {
                                this.list3.unshift(first - i);
                            }
                        } else {
                            const last = this.list3[this.list3.length - 1];
                            for (let i = 1; i < 11; i++) {
                                this.list3.push(last + i);
                            }
                        }
                        resolve();
                    }, 2000);
                });
            },
            ok() {
                Message.info('Clicked ok');
            },
            cancel() {
                Message.info('Clicked cancel');
            },
            info(nodesc) {
                Notice.info({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            success(nodesc) {
                Notice.success({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            warning(nodesc) {
                Notice.warning({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            error(nodesc) {
                Notice.error({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            background(type) {
                Message[type]({
                    background: true,
                    content: '这是一条带背景色的通知'
                });
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            getMockData() {
                let mockData = [];
                for (let i = 1; i <= 20; i++) {
                    mockData.push({
                        key: i.toString(),
                        label: 'Content ' + i,
                        description: 'The desc of content  ' + i,
                        disabled: Math.random() * 3 < 1
                    });
                }
                return mockData;
            }
            ,
            getTargetKeys() {
                return this.getMockData()
                    .filter(() => Math.random() * 2 > 1)
                    .map(item => item.key);
            }
            ,
            render1(item) {
                return item.label;
            }
            ,
            handleChange1(newTargetKeys, direction, moveKeys) {
                console.log(newTargetKeys);
                console.log(direction);
                console.log(moveKeys);
                this.targetKeys1 = newTargetKeys;
            }
            ,
            start() {
                Loading.start();
            }
            ,
            finish() {
                Loading.finish();
            }
            ,
            error() {
                Loading.error();
            }
            ,
            handleSearch2(value) {
                this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
                    value + '@qq.com',
                    value + '@sina.com',
                    value + '@163.com'
                ];
            }
            ,
        }
        ,
        mounted() {

            let vm = this;
            // The mendix init data to vue
            this.$parent.$on('widget-loaded', data => {
                for (const key in data) {
                    if (data.hasOwnProperty(key)) {
                        const element = data[key];
                        vm[key] = element;
                    }
                }
            });

            // The mendix contextobj is change will call this
            this.$parent.$on("widget-change", data => {

            });
        }
    }
</script>

<style lang="css" scoped>
    .back-top {
        padding: 10px;
        background: rgba(0, 153, 229, .7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }

    .loader {
        width: 30px;
        height: 30px;
        position: relative;
        margin: 0 auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    .circular {
        -webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
        height: 100%;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124;
        }
    }

    @keyframes color {
        0%, 100% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%, 90% {
            stroke: #ffa700;
        }
    }

    .demo-affix {
        display: inline-block;
        color: #fff;
        padding: 10px 30px;
        text-align: center;
        background: rgba(0, 153, 229, .9);
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .demo-spin-col {
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }

    .demo-split {
        height: 200px;
        border: 1px solid #dcdee2;
    }

    .demo-split-pane {
        padding: 10px;
    }

    .demo-badge {
        width: 42px;
        height: 42px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }

    .demo-carousel {
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        background: #506b9e;
    }
</style>